.loader#output
script(src= assetsPath + 'js/fetch.min.js')
script(src= assetsPath + 'js/perf-cascade.min.js')
script(type='text/javascript').
  const outputHolderEl = document.getElementById("output");
  const pageSelectorEl = document.getElementById("page-selector");
  const legendHolderEl = document.getElementById("legend-holder");
  const options = {
    rowHeight: 23,
    showAlignmentHelpers : false,
    showIndicatorIcons: false,
    showMimeTypeIcon: true,
    leftColumnWidth: 30,
    legendHolder: legendHolderEl,
    pageSelector: pageSelectorEl,
    selectedPage: #{harIndex}
  };
if options.gzipHAR
    script(src= assetsPath + 'js/gunzip.min.js')
    script(type='text/javascript').
      if (window["fetch"]) {
          window["fetch"]('data/browsertime.har.gz')
          .then(f => f.arrayBuffer()).then(arrayBuffer => {
            const byteArray = new Uint8Array(arrayBuffer);
            const gunzip = new Zlib.Gunzip(byteArray);
            const decompressedArray = gunzip.decompress();
            let string = '';
            // only way to make it work on Safari iOS?
            try {
              string = new TextDecoder("utf-8").decode(decompressedArray);
            }
            catch(e) {
              /* utf.js - UTF-8 <=> UTF-16 convertion
               *
               * Copyright (C) 1999 Masanao Izumo <iz@onicos.co.jp>
               * Version: 1.0
               * LastModified: Dec 25 1999
               * This library is free.  You can redistribute it and/or modify it.
               */

              function Utf8ArrayToStr(array) {
                  var out, i, len, c;
                  var char2, char3;

                  out = "";
                  len = array.length;
                  i = 0;
                  while(i < len) {
                  c = array[i++];
                  switch(c >> 4)
                  {
                    case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
                      // 0xxxxxxx
                      out += String.fromCharCode(c);
                      break;
                    case 12: case 13:
                      // 110x xxxx   10xx xxxx
                      char2 = array[i++];
                      out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
                      break;
                    case 14:
                      // 1110 xxxx  10xx xxxx  10xx xxxx
                      char2 = array[i++];
                      char3 = array[i++];
                      out += String.fromCharCode(((c & 0x0F) << 12) |
                                     ((char2 & 0x3F) << 6) |
                                     ((char3 & 0x3F) << 0));
                      break;
                  }
                  }

                  return out;
              }
              string = Utf8ArrayToStr(decompressedArray);
            }
            const har = JSON.parse(string);
            const perfCascadeSvg = perfCascade.fromHar(har, options);
            document.getElementById('output').classList.remove('loader');
            outputHolderEl.appendChild(perfCascadeSvg);
          })
      }
else
    script(type='text/javascript').
      if (window["fetch"]) {
       window["fetch"]('data/browsertime.har')
       .then(f => f.json()).then(har => {
         const perfCascadeSvg = perfCascade.fromHar(har, options);
         document.getElementById('output').classList.remove('loader');
         outputHolderEl.appendChild(perfCascadeSvg);
       })
      }
